<template>
    <div>
      <!-- 查询条件 -->
      <div style="margin-bottom: 10px;">
        <el-input 
          style="width: 200px" 
          placeholder="学生姓名" 
          v-model="studentName"
        ></el-input>
        <el-input 
          style="width: 200px; margin: 0 5px" 
          placeholder="教师姓名" 
          v-model="teacherName"
        ></el-input>
        <el-button type="primary" @click="load(1)">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
  
      <!-- 数据表格 -->
      <el-table 
        :data="tableData" 
        stripe 
        :header-cell-style="{backgroundColor: 'aliceblue', color: '#666'}"
      >
        <el-table-column prop="studentName" label="学生姓名" align="center"></el-table-column>
        <el-table-column prop="teacherName" label="教师姓名" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template v-slot="scope">
            <el-button 
              type="text" 
              @click="showDetail(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div style="margin: 10px 0;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [],   // 表格数据
        pageNum: 1,      // 当前页码
        pageSize: 10,    // 每页条数
        total: 0,        // 总数据量
        studentName: '', // 查询条件
        teacherName: ''  // 查询条件
      }
    },
    created() {
      this.load()
    },
    methods: {
      // 加载数据
      load(pageNum) {
        if (pageNum) this.pageNum = pageNum
        
        this.$request.get('/select/selectChoose', {
          params: {
            studentName: this.studentName,
            teacherName: this.teacherName,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        }).then(res => {
          this.tableData = res.data
          this.total = res.total // 假设接口返回总条数
        })
      },
  
      // 重置查询条件
      reset() {
        this.studentName = ''
        this.teacherName = ''
        this.load(1)
      },
  
      // 分页切换
      handleCurrentChange(pageNum) {
        this.load(pageNum)
      },
  
      // 查看详情（示例方法）
      showDetail(row) {
        this.$alert(`
          学生姓名：${row.studentName}
          教师姓名：${row.teacherName}
        `, '关联详情', {
          confirmButtonText: '确定'
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .el-input {
    margin-right: 5px;
  }
  </style>